<template>
  <div :class="['sticky-header', { show: isSticky }]">
    <div class="sticky-header-inner">
      <div v-if="!isSticky" class="sticky-mask"></div>
      <div class="sticky-home-btn" @click="goToHome">返回首页</div>
      <div class="main-title-row sticky-row">
        <div class="main-title-group left">
          <div class="main-title-btn sticky-btn" @click="goToSection('公告')">公告</div>
          <div class="main-title-btn sticky-btn" @click="goToSection('项目信息')">项目信息</div>
        </div>
        <div class="main-title sticky-title"
             :class="{ 'main-title-clickable': !isHome }"
             @click="!isHome && goToHome()"
        >
          创业灯塔-齐学创
        </div>
        <div class="main-title-group right">
          <div class="main-title-btn sticky-btn" @click="goToSection('项目成果')">项目成果</div>
          <div class="main-title-btn sticky-btn" @click="goToSection('导师')">导师</div>
        </div>
        <div class="sticky-user-center-btn" @click="goToPersonalCenter">个人中心</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const isSticky = ref(false);

const handleScroll = () => {
  // 这里假设页面有 .bg-mask-top 元素，否则可用 window.scrollY 判断
  const maskTop = document.querySelector('.bg-mask-top');
  if (!maskTop) {
    isSticky.value = window.scrollY > 60;
    return;
  }
  const rect = maskTop.getBoundingClientRect();
  isSticky.value = rect.bottom <= 0;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});
onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

const isHome = computed(() => {
  return route.path === '/index/home' || route.path === '/';
});

const goToHome = () => {
  router.push('/index/home');
};

const goToSection = (name) => {
  let path = '';
  if (name === '公告') path = '/index/newsList';
  if (name === '项目信息') path = '/index/xiangmuxinxiList';
  if (name === '项目成果') path = '/index/xiangmuchengguoList';
  if (name === '导师') path = '/index/daoshiList';
  if (path) {
    router.push(path);
  }
};

const goToPersonalCenter = () => {
  router.push('/index/pingdingdengjiList?centerType=1');
};
</script>
<style scoped>
.sticky-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9999;
  pointer-events: none;
  background: hsl(220, 80%, 25%);
  border-radius: 0;
}
.sticky-header.show {
  display: block;
  pointer-events: auto;
}
.sticky-header-inner {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-radius: 0;
  margin-top: 16px;
  width: 100vw;
  max-width: none;
  padding: 18px 40px 10px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.sticky-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 1;
  pointer-events: none;
}
.sticky-row {
  gap: 120px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-title {
  color: #222 !important;
  text-shadow: none !important;
  font-size: 36px;
  font-weight: bold;
  min-width: 220px;
  text-align: center;
}
/* 修复全局 .main-title-clickable 样式影响，确保 sticky-header 主标题始终为深色 */
.sticky-header .sticky-title.main-title-clickable {
  color: #222 !important;
}
.sticky-btn {
  color: #222 !important;
  text-shadow: none !important;
  font-size: 20px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.sticky-btn:hover {
  transform: scale(1.1);
  color: #1976d2 !important;
}
.sticky-home-btn {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme, #ff9800);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.sticky-home-btn:hover {
  background: #ffa726;
}
.sticky-user-center-btn {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme, #1976d2);
  color: #222; /* 由白色改为黑色 */
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.sticky-user-center-btn:hover {
  background: #2196f3;
}
.main-title-clickable {
  cursor: pointer;
  color: #222 !important;
}
.main-title-group {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
</style> 